<template>
	<div>
		<el-row :gutter="24" v-if="interFaceShow == 'report'">
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.dict" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.brand" @change="getCompanyInfo" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.time" size="small" style="width:100%" type="date" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
			<el-col :span="2">
				<el-button size="small" type="primary" @click="query">查询</el-button>
			</el-col>
			<el-col :span="2" style="margin-left: -40px; text-align: right;">
				<el-button size="small" type="primary" @click="processOut" v-loading.fullscreen.lock="fullScreenLoading" v-if="btnGroup.export">导出</el-button>
			</el-col>
		</el-row>
		<el-row v-if="interFaceShow == 'report'">
			<div class="report_Fixedwidth">
				<table class="report_table" id="weekReport" cellspacing="0" width="3760px" cellpadding="0">
					<tbody>
						<tr class="texttbody" height="60px;">
							<th scope="col" style="width: 80px;" rowspan="3">品牌</th>
							<th scope="col" style="width: 80px;" rowspan="3">区域</th>
							<th scope="col" style="width: 200px;" rowspan="3">4S店</th>
							<th scope="col" colspan="21" >当周</th>
							<th scope="col" colspan="21" >当月</th>
						</tr>
						<tr class="texttbody" height="60px;">
							<th scope="col" colspan="10">新保</th>
							<th scope="col" colspan="10">续保</th>
							<th scope="col" rowspan="2" style="width: 80px;">总保单数</th>
							<th scope="col" colspan="10">新保</th>
							<th scope="col" colspan="10">续保</th>
							<th scope="col" rowspan="2" style="width: 80px;">总保单数</th>
						</tr>
						<tr class="texttbody" height="60px;">
							<th scope="col" style="width: 80px;">个数</th>
							<th scope="col" style="width: 90px;">保费</th>
							<th scope="col" style="width: 90px;">车船税</th>
							<th scope="col" style="width: 100px;">单交强个数</th>
							<th scope="col" style="width: 100px;">单交强保费</th>
							<th scope="col" style="width: 100px;">单交强车船税</th>
							<th scope="col" style="width: 80px;">追加个数</th>
							<th scope="col" style="width: 90px;">追加保费</th>
							<th scope="col" style="width: 80px;">退保个数</th>
							<th scope="col" style="width: 90px;">退保保费</th>
							<th scope="col" style="width: 80px;">个数</th>
							<th scope="col" style="width: 90px;">保费</th>
							<th scope="col" style="width: 90px;">车船税</th>
							<th scope="col" style="width: 100px;">单交强个数</th>
							<th scope="col" style="width: 100px;">单交强保费</th>
							<th scope="col" style="width: 100px;">单交强车船税</th>
							<th scope="col" style="width: 80px;">追加个数</th>
							<th scope="col" style="width: 90px;">追加保费</th>
							<th scope="col" style="width: 80px;">退保个数</th>
							<th scope="col" style="width: 90px;">退保保费</th>
							<!--<th scope="col" style="width: 120px;">当天总保单数</th>-->
							<th scope="col" style="width: 80px;">个数</th>
							<th scope="col" style="width: 90px;">保费</th>
							<th scope="col" style="width: 90px;">车船税</th>
							<th scope="col" style="width: 100px;">单交强个数</th>
							<th scope="col" style="width: 100px;">单交强保费</th>
							<th scope="col" style="width: 100px;">单交强车船税</th>
							<th scope="col" style="width: 80px;">追加个数</th>
							<th scope="col" style="width: 90px;">追加保费</th>
							<th scope="col" style="width: 80px;">退保个数</th>
							<th scope="col" style="width: 90px;">退保保费</th>
							<th scope="col" style="width: 80px;">个数</th>
							<th scope="col" style="width: 90px;">保费</th>
							<th scope="col" style="width: 90px;">车船税</th>
							<th scope="col" style="width: 100px;">单交强个数</th>
							<th scope="col" style="width: 100px;">单交强保费</th>
							<th scope="col" style="width: 100px;">单交强车船税</th>
							<th scope="col" style="width: 80px;">追加个数</th>
							<th scope="col" style="width: 90px;">追加保费</th>
							<th scope="col" style="width: 80px;">退保个数</th>
							<th scope="col" style="width: 90px;">退保保费</th>
							<!--<th scope="col" style="width: 120px;">当天总保单数</th>-->
						</tr>
						<tr v-for="item in tableData.dataList">
							<td>{{item.carBrandName}}</td>
							<td>{{item.disp}}</td>
							<td>{{item.oName}}</td>
							<td>{{item.sbCount}}</td>
							<td>{{item.sbAllNVVPrice}}</td>
							<td>{{item.sbVVULPT}}</td>
							<td>{{item.sbJqTotalCount}}</td>
							<td>{{item.sbDJqPrices}}</td>
							<td>{{item.sbDJqVVUPrices}}</td>
							<td>{{item.sbAddCount}}</td>
							<td>{{item.sbAddPrice}}</td>
							<td>{{item.sbBackCount}}</td>
							<td>{{item.sbBackPrice}}</td>
							<td>{{item.xbCount}}</td>
							<td>{{item.xbAllNVVPrice}}</td>
							<td>{{item.xbVVULPT}}</td>
							<td>{{item.xbJqTotalCount}}</td>
							<td>{{item.xbDJqPrices}}</td>
							<td>{{item.xbDJqVVUPrices}}</td>
							<td>{{item.xbAddCount}}</td>
							<td>{{item.xbAddPrice}}</td>
							<td>{{item.xbBackCount}}</td>
							<td>{{item.xbBackPrice}}</td>
							<td>{{item.totalCount}}</td>
							<td>{{item.msbCount}}</td>
							<td>{{item.msbAllNVVPrice}}</td>
							<td>{{item.msbVVULPT}}</td>
							<td>{{item.msbJqTotalCount}}</td>
							<td>{{item.msbDJqPrice}}</td>
							<td>{{item.msbDJqVVUPrices}}</td>
							<td>{{item.msbAddCount}}</td>
							<td>{{item.msbAddPrice}}</td>
							<td>{{item.msbBackCount}}</td>
							<td>{{item.msbBackPrice}}</td>
							<td>{{item.mxbCount}}</td>
							<td>{{item.mxbAllNVVPrice}}</td>
							<td>{{item.mxbVVULPT}}</td>
							<td>{{item.mxbJqTotalCount}}</td>
							<td>{{item.mxbDJqPrices}}</td>
							<td>{{item.mxbDJqVVUPrices}}</td>
							<td>{{item.mxbAddCount}}</td>
							<td>{{item.mxbAddPrice}}</td>
							<td>{{item.mxbBackCount}}</td>
							<td>{{item.mxbBackPrice}}</td>
							<td>{{item.mtotalCount}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-row>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
		<insurancePolicy v-if="interFaceShow == 'order'" :show="interFaceShow" :data="orderMapData" v-on:showChange="back"></insurancePolicy>
	</div>
</template>

<script>
	import insurancePolicy from '../assembly/insurancePolicy.vue'
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//表格数据导出
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "保险周报表.xls",
				//查询条件
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				interFaceShow: 'report',
				fullScreenLoading: false,
				CurentPage: 1,
				page: this.page,
				//区域
				regionCombo: [],
				//时间
				//4S店
				storeCombo: [],
				//品牌
				brandCombo: [],
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				mapData: {
					dict: '',
					time: '',
					companyId: '',
					brand: '',
				},
				//保险单查询条件
				orderMapData: {
					companyId: '',
					insureType: '',
					outOrderStartDate: "",
					outOrderStopDate: "",
					brand: '',
					dict: '',
				},

				btnGroup: {},
			}
		},
		methods: {
			//daochu 
			processOut: function() {
				debugger;
				this.$data.tableId = "weekReport";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//daochu fanhuihanshu
			backFunction: function() {
				this.$data.tableId = "";
			},
			//得到每周的第一天(周一)  
			getFirstDateOfWeek: function(date) {
				var oldDate = new Date(date);
				var firstDateOfWeek;
				oldDate.setDate(oldDate.getDate() + 1 - oldDate.getDay());
				firstDateOfWeek = oldDate;
				return this.moment(firstDateOfWeek).format("YYYY-MM-DD");
			},
			//得到每周的最后一天(周日)  
			getLastDateOfWeek: function(date) {
				var oldDate = new Date(date);
				var lastDateOfWeek;
				oldDate.setDate(oldDate.getDate() + 7 - oldDate.getDay());
				lastDateOfWeek = oldDate;
				return this.moment(lastDateOfWeek).format("YYYY-MM-DD");
			},
			//获取月份第一天
			getMonthFirstDay: function(data) {
				var oldData = new Date(data);
				var newDate = oldData.setDate(1);
				return this.moment(newDate).format("YYYY-MM-DD");
			},
			//获取月最后一天
			getNomthLastDay: function(data) {
				var oldData = new Date(data);
				var currentMonth = oldData.getMonth();
				var nextMonth = ++currentMonth;
				var nextMonthFirstDay = new Date(oldData.getFullYear(), nextMonth, 1);
				var oneDay = 1000 * 60 * 60 * 24;
				var newDate = new Date(nextMonthFirstDay - oneDay)
				return this.moment(newDate).format("YYYY-MM-DD");
			},
			//组件回调函数
			back: function() {
				this.$data.interFaceShow = "report";
				this.query();
			},
			//日报表双击单元格
			dblclick: function(row, column, cell, event) {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = new Date();
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				}
				if(column.property == "sbCount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "sb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getFirstDateOfWeek(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getLastDateOfWeek(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				} else if(column.property == "xbCount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "xb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getFirstDateOfWeek(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getLastDateOfWeek(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				} else if(column.property == "mSbCount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "sb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getMonthFirstDay(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getNomthLastDay(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				} else if(column.property == "mXbCount") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = "xb";
					this.$data.orderMapData.dict = this.$data.mapData.dit;
					this.$data.orderMapData.brand = this.$data.mapData.brand;
					this.$data.orderMapData.outOrderStartDate = this.getMonthFirstDay(this.$data.mapData.time);
					this.$data.orderMapData.outOrderStopDate = this.getNomthLastDay(this.$data.mapData.time);
					this.$data.interFaceShow = "order";
				}
			},
			//周报表导出
			weekReportOut: function() {
				this.$data.fullscreenLoading = true;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = '';
				}
				this.$http.post(this.API_ROOT + '/insurance/statstics/week/exp/execl', this.$data.mapData, {
						params: {}
					})
					.then(resp => {
						this.$data.fullScreenLoading = false;
						if(resp.data.success) {

							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=保险周报表-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});
			},
			handleSizeChange: function() {

			},
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			query: function() {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				}
				if(this.$data.mapData.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/insurance/statstics/week/page', //url
						body: this.$data.mapData,
						params: { //发送的参数
							start: this.$data.CurentPage,
							limit: this.page.pageSize,
						}
					}).then(function(resp) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					}, function(error) {
						// error
					})
				}
			},
			//当天新保总保费
			sbSum: function(row, column) {
				return Number(Number(row.sbSyPrice) + Number(row.sbJqPrice)).toFixed(2);
			},
			//当天续保总保费
			xbSum: function(row, column) {
				return Number(Number(row.xbJqPrice) + Number(row.xbSyPrice)).toFixed(2);
			},
			//当月新保总保费
			msbSum: function(row, column) {
				return Number(Number(row.mSbSyprice) + Number(row.mSbJqPrice)).toFixed(2);
			},
			//当月续保总保费
			mxbSum: function(row, column) {
				return Number(Number(row.mXbJpPrice) + Number(row.mXbSyPrice)).toFixed(2);
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.mapData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.mapData.dict,
						brand: this.$data.mapData.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.mapData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				//获取功品牌下拉
				this.$http.get(this.API_ROOT + '/rbac/dept/brand/all', {}).then((response) => {
					this.$data.brandCombo = response.data.dataList;
				}, (response) => {});
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();

			//获取按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "bx/weekReport", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;

				var temp = {};

				for(var i = 0; i < btnData.length; i++) {

					var btnName = btnData[i].btnName;

					temp[btnName] = btnName;

				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			});

		},
		components: {
			insurancePolicy,
			exports
		}
	}
</script>

<style>

</style>